<template>
  <div class="dingdan">
    <div class="top">
      <span
        v-for="(item, index) in dingdanArr"
        :key="index"
        @click="qiehuan(index)"
        :class="{ active: current == index }"
      >
        {{ item }}
      </span>
    </div>
    <main>
      <div class="dingdan2" v-for="(item, index) in shoppingArr" :key="index">
        <div class="imgs">
          <div class="imgsss">
            <img :src="item.pic" alt="" />
          </div>
          <div class="imgsss">
            <img :src="item.pic" alt="" />
          </div>
        </div>
        <div class="jine" style="font-size: 25px">￥ {{ item.jine }}</div>
        <div class="zailaiyidan" @click="qufan(item)">
          {{ item.laiyidan ? "再来一单" : "已送达" }}
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      dingdanArr: ["全部", "待消费", "待评价", "退款"],
      shoppingArr: [
        {
          laiyidan: true,
          pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg95.699pic.com%2Fxsj%2F2b%2Fjv%2Fko.jpg%21%2Ffw%2F700%2Fwatermark%2Furl%2FL3hzai93YXRlcl9kZXRhaWwyLnBuZw%2Falign%2Fsoutheast&refer=http%3A%2F%2Fimg95.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668774596&t=494ada9f1b82b4b5e4066a8366ed1b7c",
          name: "纯手工饺子(风城九路店)",
          jine: 17.8,
        },
        {
          laiyidan: true,
          pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.616pic.com%2Fys_bnew_img%2F00%2F05%2F25%2F6kOowMBeXV.jpg&refer=http%3A%2F%2Fpic.616pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668774596&t=a3633c4f5b8314ed356829fcbf45c9d4",
          name: "纯手工饺子(风城九路店)",
          jine: 17.8,
        },
        {
          laiyidan: true,
          pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile06.16sucai.com%2F2016%2F0315%2F5d674faa77910911a291e3e78b0e5d79.jpg&refer=http%3A%2F%2Ffile06.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668774596&t=3db127977a21665b05db12d29d83d34e",

          name: "纯手工饺子(风城九路店)",
          jine: 17.8,
        },
        {
          laiyidan: true,
          pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile06.16sucai.com%2F2016%2F0315%2F5d674faa77910911a291e3e78b0e5d79.jpg&refer=http%3A%2F%2Ffile06.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668774596&t=3db127977a21665b05db12d29d83d34e",
          name: "纯手工饺子(风城九路店)",
          jine: 17.8,
        },
      ],
    };
  },
  methods: {
    qiehuan(index) {
      this.current = index;
    },
    qufan(item) {
      item.laiyidan = !item.laiyidan;
    },
  },
};
</script>

<style lang='scss' scoped>
.jine {
  margin-top: 50px;
  position: absolute;
  top: -10px;
  right: 10px;
}
.zailaiyidan {
  width: 100px;
  height: 40px;
  border: 2px solid deepskyblue;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  color: #000;
  margin-top: 84px;
  margin-left: 46px;
}
main {
  width: 100%;
  height: 100%;
  // background-color: aqua;

  .dingdan2 {
    width: 100%;
    height: 200px;
    // background-color: bisque;
    margin-top: 10px;
    position: relative;
    display: flex;

    .dingdan-top {
      width: 100%;
      height: 10%;
      // background-color: pink;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .imgs {
      width: 60%;
      height: 90%;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-color: orange;

      .imgsss {
        width: 40%;
        height: 40%;
        border: 1px solid red;
        margin-left: 10px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.active {
  color: deepskyblue;
  font-weight: 700;
}
.dingdan {
  width: 100%;
  height: 100%;

  .top {
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
    span {
      margin-right: 15px;
      font-size: 20px;
    }
  }
}
</style>